<template>
  <div class="pre-img-wrap" v-if="isShow">
    <div class="mask" @click.self="handleMaskClick"></div>
    <div class="action-close">
      <svg class="icon ic bg" aria-hidden="true" @click="hide">
        <use xlink:href="#icon-close"></use>
      </svg>
    </div>
    <div class="action-operate">
      <svg class="icon ic" aria-hidden="true" @click="operate('zoomIn')">
        <use xlink:href="#icon-minus-circle"></use>
      </svg>
      <svg class="icon ic" aria-hidden="true" @click="operate('zoomOut')">
        <use xlink:href="#icon-add-circle"></use>
      </svg>
      <svg class="icon ic" aria-hidden="true" @click="operate('rotateLeft')">
        <use xlink:href="#icon-refresh"></use>
      </svg>
      <svg
        class="icon ic rotate"
        aria-hidden="true"
        @click="operate('rotateRight')"
      >
        <use xlink:href="#icon-refresh"></use>
      </svg>
    </div>
    <div class="action-left">
      <svg class="icon ic bg" aria-hidden="true" @click="operate('left')">
        <use xlink:href="#icon-direction-left"></use>
      </svg>
    </div>
    <div class="action-right">
      <svg class="icon ic bg" aria-hidden="true" @click="operate('right')">
        <use xlink:href="#icon-direction-right"></use>
      </svg>
    </div>
    <div class="img-wrap" :class="getMove">
      <img ref="img" :style="imgStyle" :src="url" class="pic" />
    </div>
  </div>
</template>

<script>
export default {
  name: "prevImg",
  data() {
    return {
      url: "",
      imgList: [],
      isShow: false,
      transform: {
        rotate: 0,
        scale: 1,
      },
      move: "",
    };
  },
  computed: {
    imgStyle() {
      let { rotate, scale } = this.transform;
      return {
        transform: `rotate(${rotate}deg) scale(${scale})`,
      };
    },
    getMove() {
      return this.move;
    },
  },
  watch: {
    isShow: {
      handler: function (newV) {
        !newV && this.reset();
      },
      immediate: true,
    },
  },
  methods: {
    show() {
      this.isShow = true;
    },
    hide() {
      this.isShow = false;
    },
    operate(type) {
      const index = this.imgList.indexOf(this.url);
      const len = this.imgList.length;
      if (index === -1) {
        console.log("出错了");
      }
      switch (type) {
        case "zoomIn":
          this.transform.scale -= 0.08;
          break;

        case "zoomOut":
          this.transform.scale += 0.08;
          break;

        case "rotateLeft":
          this.transform.rotate += 90;
          break;

        case "rotateRight":
          this.transform.rotate -= 90;
          break;

        case "left":
          this.reset();
          this.move = "left";
          if (index === 0) {
            this.url = this.imgList[len - 1];
          } else {
            this.url = this.imgList[index - 1];
          }
          setTimeout(() => {
            this.move = "";
          }, 500);
          break;
        case "right":
          this.reset();
          this.move = "right";

          if (index === len - 1) {
            this.url = this.imgList[0];
          } else {
            this.url = this.imgList[index + 1];
          }
          setTimeout(() => {
            this.move = "";
          }, 500);
          break;
        default:
          break;
      }
    },
    handleMaskClick() {
      console.log(123);
      this.hide();
    },
    reset() {
      this.transform = {
        rotate: 0,
        scale: 1,
      };
    },
  },
};
</script>

<style scoped>
.pre-img-wrap {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 1;
}
.action-close {
  width: 200px;
  padding: 20px;
  position: absolute;
  right: 10px;
  top: 20px;
  color: #fff;
  z-index: 30;
  display: flex;
  justify-content: flex-end;
}

.action-operate {
  position: absolute;
  bottom: 20px;
  color: #fff;
  z-index: 30;
  display: flex;
  justify-content: space-around;
  align-items: center;
  left: 50%;
  bottom: 30px;
  transform: translateX(-50%);
  width: 282px;
  height: 44px;
  padding: 0 23px;
  background-color: #606266;
  border-color: #fff;
  border-radius: 22px;
}
.action-left {
  position: absolute;
  left: 30px;
  top: 50%;
  color: #fff;
  z-index: 30;
}
.action-right {
  position: absolute;
  right: 30px;
  top: 50%;
  color: #fff;
  z-index: 30;
}
.ic {
  display: inline-block;
  margin-right: 10px;
  cursor: pointer;
  width: 25px;
  height: 25px;
}
.rotate {
  transform: rotateY(180deg);
}
.bg {
  background-color: #606266;
  border-radius: 50%;
  padding: 3px;
}
.mask {
  background: rgba(0, 0, 0, 0.5);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 20;
  display: flex;
  justify-content: center;
  align-items: center;
}

.img-wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 20;
  display: flex;
  justify-content: center;
  align-items: center;
}

.pic {
  max-height: 100%;
  max-width: 100%;
  transition: transform 0.3s ease 0s;
}

.left {
  animation: left 1s;
  -webkit-animation: left 1s;
}
@keyframes left {
  0% {
    -webkit-transform: translateX(-200px);
    opacity: 0;
  }
}
@-webkit-keyframes left {
  0% {
    -webkit-transform: translateX(-200px);
    opacity: 0;
  }
}

.right {
  animation: right 0.5s;
  -webkit-animation: right 0.5s;
}
@keyframes right {
  0% {
    -webkit-transform: translateX(200px);
    opacity: 0;
  }
}
@-webkit-keyframes right {
  0% {
    -webkit-transform: translateX(200px);
    opacity: 0;
  }
}
</style>